<template>
    <div>
<!--        查询框-->
        <el-form v-model="queryParams">
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">报修状态</span>
            <el-select v-model="queryParams.repairState"
                       style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                       size="mini"
                       placeholder="请选择报修状态">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>

            </el-select>
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">业主姓名</span>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入业主姓名"
                    v-model="queryParams.ownerRealName">
            </el-input>
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">业主电话</span>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入业主电话"
                    v-model="queryParams.ownerPhoneNumber">
            </el-input>

            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">小区名称</span>
            <el-select v-model="queryParams.communityId"
                       style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                       size="mini"
                       placeholder="请选择小区">
                <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>

            </el-select>

            <el-button type="primary" class="el-icon-search" size="mini" @click="seachRepair()">查询</el-button>
            <el-button type="info" class="el-icon-refresh" size="mini" @click="cleanSearch()" plain>重置</el-button>
        </el-form>
<!--报修信息列表-->
        <el-table
                :data="repairs"
                highlight-current-row
                style="width: 100%;margin-bottom: 5px;font-size: 13px;margin-top: 10px"
                row-key="repairId"

                :row-style="{height:'15px'}"
                :cell-style="{padding:'5px'}"
                :header-cell-style="{background:'#EBEEF5',color:'#606266'}">
            <el-table-column
                    prop="repairId"
                    label="序号"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="repairNum"
                    label="报修编号"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="repairState"
                    label="报修状态"
                    :show-overflow-tooltip="true"
                    :formatter="repairStateFormat">
            </el-table-column>
            <el-table-column
                    prop="ownerRealName"
                    label="业主姓名"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="ownerPhoneNumber"
                    label="业主电话"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="repairContent"
                    label="报修内容"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="详细地址"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="doorTime"
                    label="期待上门时间"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="completeName"
                    label="处理人姓名"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    label="操作"
                    >
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning" plain
                            @click="handleUpdate(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <!--分页控件-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="size"
                    layout="total, prev, pager, next, jumper"
                    :total="total" align="left">
            </el-pagination>
        </div>
<!--报修详情信息-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="700px" append-to-body>
            <el-form :model="repairForm" size="small" label-width="100px" class="demo-ruleForm">
                <el-form-item label="报修编号" prop="repairId" style="display: inline-block">
                    <el-input v-model="repairForm.repairId" placeholder="请输入报修编号" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="报修状态" prop="repairState" style="display: inline-block">
                    <el-input v-model="repairForm.repairState" placeholder="请选择报修状态" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="业主姓名" prop="ownerRealName" style="display: inline-block">
                    <el-input v-model="repairForm.ownerRealName" placeholder="请输入业主姓名" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime" style="display: inline-block">
                    <el-input v-model="repairForm.createTime" placeholder="请选择创建时间" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="派单时间" prop="assignmentTime" style="display: inline-block">
                    <el-input v-model="repairForm.assignmentTime" placeholder="请选择派单时间" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="接单时间" prop="receivingOrdersTime" style="display: inline-block">
                    <el-input v-model="repairForm.receivingOrdersTime" placeholder="请选择接单时间" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="处理完成时间" prop="completeTime" style="display: inline-block">
                    <el-input v-model="repairForm.completeTime" placeholder="请选择处理完成时间" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="取消时间" prop="cancelTime" style="display: inline-block">
                    <el-input v-model="repairForm.cancelTime" placeholder="请选择取消时间" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="期待上门时间" prop="doorTime" style="display: inline-block">
                    <el-input v-model="repairForm.doorTime" placeholder="请选择期待上门时间" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="分派人id" prop="assignmentId" style="display: inline-block">
                    <el-input v-model="repairForm.assignmentId" placeholder="请输入分派人id" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="处理人姓名" prop="completeName" style="display: inline-block">
                    <el-input v-model="repairForm.completeName" placeholder="请输入处理人姓名" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="处理人电话" prop="completePhone" style="display: inline-block">
                    <el-input v-model="repairForm.completePhone" placeholder="请输入处理人电话" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="报修内容" prop="repairContent" style="display: inline-block">
                    <el-input v-model="repairForm.repairContent" placeholder="请输入报修内容" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="address" style="display: inline-block">
                    <el-input v-model="repairForm.address" placeholder="请输入详细地址" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark" style="display: inline-block">
                    <el-input v-model="repairForm.remark" placeholder="请输入备注" style="display: inline-block"></el-input>
                </el-form-item>
                <el-form-item label="小区ID" prop="communityId" style="display: inline-block">
                    <el-input v-model="repairForm.communityId" placeholder="请输入小区ID" style="display: inline-block"></el-input>
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "Repair",
        data(){
            return{
                //总条数
                total: 0,
                //当前页
                current: 1,
                //每页多少条
                size: 5,
                repairs:[],   //报修信息集合
                repairForm:{},
                queryParams:{
                    repairState: undefined,
                    ownerRealName: '',
                    ownerPhoneNumber: '',
                    communityId: '',
                },

                options: [{
                    value: 'Pending',
                    label: '待处理'
                }, {
                    value: 'Allocated',
                    label: '已分派'
                }, {
                    value: 'Processing',
                    label: '处理中'
                }, {
                    value: 'Processed',
                    label: '已处理'
                }, {
                    value: 'NO_Processed',
                    label: '不处理'
                }, {
                    value: 'Cancelled',
                    label: '已取消'
                }],
                options2: [{
                    value: '1338423795842494466',
                    label: '恒大城二期'
                }, {
                    value: '1338423709557272577',
                    label: '恒大城三期'
                }],

                dialogFormVisible: false,   //表单是否隐藏
                title:'',
            }
        },
        methods:{

            showRepairs(current,size){
                this.axios.get("http://localhost:8080/repair/repair/getRepairs/getRepairsByTerm?current="+this.current+"&size="+this.size)
                    .then(res => {
                      this.repairs =  res.data.data.records;
                      this.current = res.data.data.current;
                      this.total = res.data.data.total;
                      this.size = res.data.data.size;
                    })
            },
            seachRepair(){
              this.axios.get("http://localhost:8080/repair/repair/getRepairs/getRepairsByTerm",{
                  params:{
                      current:this.current,
                      repairState: this.queryParams.repairState,
                      ownerRealName: this.queryParams.ownerRealName,
                      ownerPhoneNumber: this.queryParams.ownerPhoneNumber,
                      communityId: this.queryParams.communityId,
                  }
              }).then(res => {
                  this.repairs =  res.data.data.records;
                  this.current = res.data.data.current;
                  this.total = res.data.data.total;
                  this.size = res.data.data.size;
              })
            },
            //页里面的条数发生改变
            handleSizeChange(val){
                this.size = val;
                this.showRepairs(this.current,this.size)
            },
            //页数发生改变
            handleCurrentChange(val){
                this.current = val;
                this.showRepairs(this.current,this.size)
            },

            //查看详情界面数据回显
            handleUpdate(row){
                console.log(row);
                this.repairForm = row;
                this.dialogFormVisible = true;
                this.title = "报修详细信息";
            },

            //清除搜索框数据
            cleanSearch(){
                this.queryParams={
                    repairState: undefined,
                    ownerRealName: '',
                    ownerPhoneNumber: '',
                    communityId: '',
                };
            },
            repairStateFormat(row, column) {
                if (row.repairState == 'Pending') {
                    return '待处理';
                } else if (row.repairState == 'Allocated') {
                    return '已分派';
                } else if (row.repairState == 'Processing') {
                    return '处理中';
                } else if (row.repairState == 'Processed') {
                    return '已处理';
                } else if (row.repairState == 'NO_Processed') {
                    return '不处理';
                } else if (row.repairState == 'Cancelled') {
                    return '已取消';
                }
            },

        },
        created() {
            this.showRepairs(this.current,this.size);
        }
    }
</script>

<style scoped>
    /deep/.el-table th > .cell {
        text-align: center;

    }
    /deep/.el-table td > .cell {
        text-align: center;

    }

</style>
